<script setup lang="ts">
defineOptions({
  name: "importBottle"
});
import { ref, computed } from "vue";
import importFiles from "@/views/common/components/importFiles/index.vue";

interface Props {
  uploadApi?: (p?: any) => Promise<any>;
}

const props = withDefaults(defineProps<Props>(), {});

const dialogVisible = defineModel({ type: Boolean, default: false });

const importFile = ref<string>("");

const emits = defineEmits(["submit"]);

const submitHandler = () => {
  emits("submit");
};
</script>

<template>
  <px-dialog v-model="dialogVisible" title="导入数据" :width="600">
    <div class="import-bottle">
      <div class="import-bottle-title">
        上传前请先
        <span class="download"> 下载模板 </span>
        ，填写完成后导入数据
      </div>
      <div class="import-bottle-upload">
        <importFiles v-model="importFile" :uploadApi="uploadApi" @submit="submitHandler" />
      </div>
    </div>
  </px-dialog>
</template>

<style lang="scss" scoped>
.import-bottle {
  .import-bottle-title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding-left: 16px;
    margin-bottom: 24px;
    line-height: 1;
    color: #333;
    background-color: #fef5e6;
    border: 1px solid #f7b648;
    border-radius: 6px;

    .download {
      color: #3b82f6;
    }
  }

  .import-bottle-upload {
    width: 100%;
  }
}
</style>
